<template>
  <view class="sysMsg">
    <view class="msgBox" v-for="(v, i) in list" :key="i" @click="jumpLink({link: '/pagesA/sysMsgDetail/index', query: {id: v.id}})">
      <view class="time">{{v.create_time}}</view>
      <view class="imageBox">
        <image :src="v.img" mode="widthFix" />
      </view>
      <view class="textBox">
        {{ v.name }}
      </view>
    </view>
  </view>
</template>

<script>
import { sysList } from "../../api/api/user";
export default {
  data() {
    return {
      limit: 10,
      page: 0,
      flag: false, //是否加载完啦
      list: [],
    };
  },
  onLoad() {
    this.getsysList();
  },
  onReachBottom() {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    this.getsysList();
  },
  methods: {
    getsysList() {
      if (this.flag) {
        return uni.showToast({
          title: "已加载全部",
          duration: 2000,
          icon: "none",
        });
      }
      this.page++;
      let data = {
        page: this.page,
        limit: this.limit,
      };
      sysList(data).then((res) => {
        uni.hideLoading();
        if (res.data.length < this.limit) {
          this.flag = true;
        }
        let arr = res.data.map((v) => {
          v.image = v.img;
          v.title = v.name;
          v.time = v.create_time;
          return v;
        });
        this.list = this.list.concat(arr);
      });
    },
  },
};
</script>

<style scoped>
.sysMsg {
  padding: 30rpx 20rpx;
  box-sizing: border-box;
}
.msgBox {
  width: 100%;
  border-radius: 10rpx;
  margin-bottom: 50rpx;
}
.msgBox .time {
  font-size: 24rpx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rpx;
  color: #5f5f5f;
  text-align: center;
  margin-bottom: 20rpx;
}
.msgBox .imageBox {
  max-height: 290rpx;
  border-radius: 10rpx;
  overflow-y: hidden;
}
.msgBox .imageBox image {
  width: 100%;
}
.msgBox .textBox {
  padding: 40rpx 15rpx;
  box-sizing: border-box;
  background: #fff;
  font-size: 30rpx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rpx;
  color: #000000;
}
</style>